<template>
  <div class="header">
    <div class="top">
      <div class="left">
        <div class="iconfont icon-zuojiantou"></div>
        <div class="back">返回</div>
      </div>
      <div class="right">订单结算</div>
    </div>
    <div class="middle">
      <van-cell @click="showPopup">
        <span class="choose">选择地址</span>
        <span class="iconfont icon-youjiantou"></span>
      </van-cell>
      <van-popup v-model="show" class="dizhi" position="bottom" :style="{ height: '30%' }">
          <div class="top">选择地址</div>
          <div class="bottom">新增地址</div>
          
      </van-popup>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.header {
  .top {
    display: flex;
    .left {
      display: flex;
      margin: 10px 10px;
      .iconfont {
      }
      .back {
      }
    }
    .right {
        margin: 10px 100px;
    }
  }
  .middle {
      margin: 10px 10px;
      .chooose {

      }
      .iconfont{

      }
      .dizhi {
          .top {
              width: 100%;
              height: 50px;
              line-height: 50px;

          }
          .bottom {
              color: white;
              text-align: center;
              line-height: 50px;
              height: 50px;
              width: 100%;
              border-radius: 20px;
              background-color: blue;
          }
      }
  }
}
</style>



<script>
import "@/assets/fonts/iconfont.css";
export default {
  name: "dingdanjiesuan",
  data() {
    return {
      show: false,
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
  },
}
</script>